<template>
  <el-button
    :type="type || themeType"
    v-bind="$attrs"
    @click="$emit('click')"
    :class="{ 'theme-btn': true }"
  >
    <slot>{{ text }}</slot>
  </el-button>
</template>

<script setup>
import { useTheme } from '@/hooks/useTheme'

// 使用主题组合API获取当前主题按钮类型
const { themeType } = useTheme()

defineProps({
  // 按钮类型
  type: {
    type: String,
    default: 'primary'
  },
  // 按钮文本
  text: {
    type: String,
    default: ''
  }
})

defineEmits(['click'])
</script>

<style lang="scss" scoped>
.theme-btn {
  &.is-link {
    /* 确保链接样式按钮的文字颜色符合主题 */
    &.el-button--primary {
      color: var(--primary-color) !important;
    }
    
    &.el-button--success {
      color: var(--success-color) !important;
    }
    
    &.el-button--danger {
      color: var(--danger-color) !important;
    }
  }
}

.el-button {
  // 根据主题按钮类型应用相应的样式
  &.el-button--primary {
    --el-button-text-color: var(--primary-button-text-color, #ffffff);
    --el-button-bg-color: var(--primary-color, #409eff);
    --el-button-border-color: var(--primary-color, #409eff);
    --el-button-hover-text-color: var(--primary-button-text-color, #ffffff);
    --el-button-hover-bg-color: var(--primary-hover-color, #66b1ff);
    --el-button-hover-border-color: var(--primary-hover-color, #66b1ff);
    --el-button-active-text-color: var(--primary-button-text-color, #ffffff);
    --el-button-active-bg-color: var(--primary-active-color, #3a8ee6);
    --el-button-active-border-color: var(--primary-active-color, #3a8ee6);
  }

  &.el-button--success {
    --el-button-text-color: var(--success-button-text-color, #ffffff);
    --el-button-bg-color: var(--success-color, #67c23a);
    --el-button-border-color: var(--success-color, #67c23a);
    --el-button-hover-text-color: var(--success-button-text-color, #ffffff);
    --el-button-hover-bg-color: var(--success-hover-color, #85ce61);
    --el-button-hover-border-color: var(--success-hover-color, #85ce61);
    --el-button-active-text-color: var(--success-button-text-color, #ffffff);
    --el-button-active-bg-color: var(--success-active-color, #5daf34);
    --el-button-active-border-color: var(--success-active-color, #5daf34);
  }

  &.el-button--danger {
    --el-button-text-color: var(--danger-button-text-color, #ffffff);
    --el-button-bg-color: var(--danger-color, #f56c6c);
    --el-button-border-color: var(--danger-color, #f56c6c);
    --el-button-hover-text-color: var(--danger-button-text-color, #ffffff);
    --el-button-hover-bg-color: var(--danger-hover-color, #f78989);
    --el-button-hover-border-color: var(--danger-hover-color, #f78989);
    --el-button-active-text-color: var(--danger-button-text-color, #ffffff);
    --el-button-active-bg-color: var(--danger-active-color, #dd6161);
    --el-button-active-border-color: var(--danger-active-color, #dd6161);
  }
}
</style> 